<template>
	<cusNavVue title="首页" bgColor="#ff0000"></cusNavVue>
	<view class="content">
		<view class="search-model">
			<cusSearchVue></cusSearchVue>
		</view>
		<view class="main-page">
			<text>{{$t('B')}}</text>
			<button @click="changeLanguage">{{$t('A')}}</button>
			<up-tabs :list="list1"></up-tabs>
			<image class="logo" src="/static/logo.png"></image>
			<view class="text-area">
				<text class="title">{{title}}</text>
			</view>
			<cusViewVue></cusViewVue>
			<uni-grid :column="3">
				<uni-grid-item>
					<text class="text">文本</text>
				</uni-grid-item>
				<uni-grid-item>
					<text class="text">文本</text>
				</uni-grid-item>
				<uni-grid-item>
					<text class="text">文本</text>
				</uni-grid-item>
			</uni-grid>
			<view class="font">
				独占一行，类似于div标签
			</view>
			<up-sticky offset-top="200">
				<text>塞下秋来风景异，衡阳雁去无留意</text>
			</up-sticky>
			<text>123</text>
			<!-- 轮播在微信小程序中展示，但是在H5(web)页面不展示轮播 -->
			<!-- #ifndef MP-WEIXIN  -->
			<view class="swiper-wrap">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" :circular="true">
					<swiper-item>
						<image class="swiper-image"
							src="http://gips1.baidu.com/it/u=3874647369,3220417986&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280"
							mode=""></image>
					</swiper-item>
					<swiper-item>
						<image class="swiper-image"
							src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024"
							mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- #endif -->
			<up-button @click="changeLanguage">切换语言</up-button>
			<up-button @click="saveToken">保存token</up-button>
			<up-button @click="getToken">获取token</up-button>
			<up-button @click="delToken">删除token</up-button>
			<up-button @click="clearToken">清除所有token</up-button>
			<icon type="success_no_circle" size="26" />
			<icon type="success" size="26" />
			<text class="title">{{title}}</text>
			<rich-text :nodes="nodesArr"></rich-text>
			<navigator url="/pages/my/my" open-type="switchTab">跳转到我的(my)页面</navigator>
			<navigator url="/pages/test/test" open-type="navigate">跳转到测试(test)页面</navigator>
			<up-button type="primary" @click="goMy">跳转到我的页面</up-button>
			<up-button type="primary" @click="goTest">跳转到测试页</up-button>
			<map></map>
			<up-button type="primary" @click="handleImage">选择图片</up-button>
			<up-button @click="doPay">支付</up-button>

			<!-- <view class="list-item" v-for="item in houseList">
				<view class="title" @click="goDetail(item.id, item.title)">
					{{item.title}}
				</view>
				<image class="list-item-image" :src="item.image" mode=""></image>
				<view class="publish-ifno">
					{{item.publishPerson}}-{{item.publishTime}}
				</view>
			</view> -->
			<goodsVue v-for="item in houseList" :imgUrl="item.image" :name="item.title" :price="item.id"
				:type="item.publishTime" :id="item.id"></goodsVue>
			<view class="">
				卡片组件 -------------------------
			</view>
			<productVue v-for="item in houseList" :imgUrl="item.image" :title="item.title"></productVue>
		</view>
		<up-overlay :show="show" @click="close">
			<view class="warp">
				<image width="300" src="../../static/p1.jpeg" mode=""></image>
				<up-icon @click="close" color="#fff" size="30" name="close-circle"></up-icon>
			</view>
		</up-overlay>
		<button @click="open">打开弹窗</button>
	</view>
	<cusTabVue></cusTabVue>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import cusViewVue from '../../components/cus-view/cus-view.vue';
	import cusSearchVue from '../../components/cus-search/cus-search.vue';
	import cusNavVue from '../../components/cus-nav/cus-nav.vue';
	// import cusTabbarVue from '../../components/cus-tabbar/cus-tabbar.vue';
	import goodsVue from '../../components/goods/goods.vue';
	import cusTabVue from '../../components/cus-tab/cus-tab.vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import productVue from '../../components/product/product.vue';
	import {
		useI18n
	} from 'vue-i18n';
	// onLoad(() => {
	// 	console.log(123)
	// 	const token = uni.getStorageSync('token')
	// 	console.log(token)
	// 	if(!token) {
	// 		uni.navigateTo({
	// 			url: '/pages/login/login'
	// 		})
	// 	}
	// })
	const show = ref(false)
	
	function open() {
		// 打开逻辑，比如设置 show 为 true  
		show.value = true;
		// console.log('open');  
	}
	open()
	function close() {
		// 关闭逻辑，设置 show 为 false  
		show.value = false;
		// console.log('close');  
	}
	setTimeout(() => {
		close()
	}, 3000)
	// onLoad(() => {
	// 	const token = uni.getStorageSync('token')
	// 	// 判断是否登录
	// 	if (!token) {
	// 		uni.navigateTo({
	// 			url: '/pagesA/codeLogin/codeLogin'
	// 		})
	// 	}
	// })
	const locale = useI18n().locale // {locale: 'en'}
	const changeLanguage = () => {
		console.log(locale.value)
		// if(locale.value==='en') {
		// 	locale.value = 'zh'
		// } else {
		// 	locale.value = 'en'
		// }
		locale.value = locale.value === 'en' ? 'zh' : 'en'
		uni.setStorageSync('lan', locale.value)
	}
	const keyword = ref('')
	const title = ref('你好，我是text标签')
	const htmlStr = ref('<img class="logo" src="/static/logo.png"></img>')
	const list1 = ref([{
			name: 'tab1'
		},
		{
			name: 'zheshi tab2'
		}
	])
	const nodesArr = ref([{
		name: 'img',
		attrs: {
			class: 'message-icon',
			src: '/static/icon/bs.png'
		}
	}])
	const goMy = () => {
		uni.switchTab({
			url: '/pages/my/my'
		})
	}
	const goTest = () => {
		uni.navigateTo({
			url: '/pages/test/test'
		})
	}
	const saveToken = () => {
		// localStorage.setItem()
		const token = '123123123123123'
		uni.setStorageSync('t', token)
	}
	const getToken = () => {
		console.log(uni.getStorageSync('c'))
	}
	const delToken = () => {
		uni.removeStorageSync('c')
	}
	const clearToken = () => {
		uni.clearStorageSync()
	}
	const handleImage = () => {
		uni.chooseImage({
			success(res) {
				console.log(res)
			}
		})
	}
	const doPay = () => {
		const token = uni.getStorageSync('token')
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
	}
	const houseList = ref([{
			title: '张学友',
			image: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
			publishTime: '2024-12-11 12:00',
			id: 1
		},
		{
			title: '刘德华',
			image: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
			publishTime: '2024-12-11 12:00',
			id: 2
		},
		{
			title: '郭富城',
			image: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
			publishTime: '2024-12-11 12:00',
			id: 3
		},
		{
			title: '黎明',
			image: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
			publishTime: '2024-12-11 12:00',
			id: 4
		},
	])
	const getHouseList = () => {
		uniCloud.callFunction({
			name: 'getHouse',
			success(res) {
				console.log(res)
			}
		})
	}
	getHouseList()
	const goDetail = (id, title) => {
		uni.navigateTo({
			url: '/pages/detail/detail?id=' + id + '&title=' + title
		})
	}
	// #ifdef MP-WEIXIN
	console.log('我是微信')
	// #endif
	// #ifdef H5
	console.log('我是H5')
	// #endif
</script>

<style lang="scss" scoped>
	.swiper-image {
		width: 100vw;
		height: 300rpx;
	}

	.list-item-image {
		width: 100rpx;
		height: 100rpx;
	}

	.content {
		padding-top: 160rpx;
	}

	.message-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.font {
		/* #ifdef MP-WEIXIN */
		color: #ff0000;
		/* #endif */
		/* #ifdef H5 */
		color: #0000ff;
		/* #endif */
	}

	.search-model {
		position: fixed;
		top: 156rpx;
		background: #fff;
		z-index: 999;
		width: 100vw;
	}

	.main-page {
		padding-top: 80rpx;
	}

	.swiper-wrap {
		position: sticky;
		top: 80rpx;
		z-index: 999;
	}
	.warp{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		
		
		display: flex; // 开启弹性盒
		flex-direction: column; // 设置主轴方向
		align-items: center; // 
	}
</style>